{% extends './base.html' %}
{% block title %}文章列表{% endblock %}
{% block header %}
    <style>
        td.desc {
            max-width: 400px !important;
            overflow: hidden;
        }
    </style>
{% endblock %}
{% block footer %}
    <script>
        $(function () {
            var posts_tbody = $('#posts-tbody')
            var pages_box = $('#page-box')
            var params = {
                page: 1,
                limit: 10,
                category: 0,
                s: '',
            }
            getPostsApi()

            // 获取文章
            function getPostsApi() {
                lightyear.loading('show')
                $ajax.get({
                    url: '/v1/api/posts/',
                    data: params,
                    success: function (res) {
                        if (res.code === 200) {
                            posts_tbody.empty()
                            pages_box.empty()
                            var html = template('post-item', {"posts": res.data})
                            posts_tbody.append(html)
                            pages_box.append(renderPage(res))
                        } else {
                            lightyear.notify("获取失败~~", 'danger', 1000)
                        }
                        lightyear.loading('hide')
                    }
                })
            }

            // 搜索
            $('#search-btn').click(function () {
                params['page'] = 1
                params['s'] = $('input[name=s]').val().trim()
                params['category'] = $('select[name=category]').val()
                getPostsApi()
            })

            // 推荐
            $(document).on('click', '.switch-success input', function () {
                lightyear.loading('show')
                var is_recom = this.checked == true ? 1 : 0
                var pid = $(this).parents('tr').attr('data-pid')
                $ajax.post({
                    url: '/cms/recommend/',
                    data: {
                        is_recom: is_recom,
                        pid: pid,
                    },
                    success: function (res) {
                        lightyear.loading('hide')
                        if (res.code === 200) {
                            lightyear.notify(res.msg, 'success', 1000)
                        } else {
                            lightyear.notify(res.msg, 'danger', 1000)
                        }
                    }
                })
            })
            // 点击页数
            $(document).on('click', '#page-box li', function () {
                var p = $(this).attr('data-page')
                if (p) {
                    params['page'] = p
                    getPostsApi()
                }
            })

        })

    </script>
{% endblock %}
{% block utils %}

    {% verbatim %}
    <script type="text/html" id="post-item">
        {{ each posts post }}
        <tr data-pid="{{ post.pid }}">
            <td class="pid">{{ post.pid }}</td>
            <td class="title">{{ post.title }}</td>
            <td class="desc">{{ post.desc }}</td>
            <td class="username">{{ post.author.username }}</td>
            <td class="category">{{ post.category.name }}</td>
            <td class="recommend">
                <label class="lyear-switch switch-outline switch-success">
                    <input type="checkbox" {{ post.is_recom ? 'checked' : '' }} >
                    <span></span>
                </label>
            </td>
            <td class="operation">
                <div class="btn-group">
                    <a class="btn btn-xs btn-default" href="/cms/posts/edit/{{ post.pid }}/" title="编辑"
                       data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                    <a class="btn btn-xs btn-default" href="#" title="删除"
                       data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                </div>
            </td>
        </tr>
        {{ /each }}
    </script>
    {% endverbatim %}
{% endblock %}
{% block main %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <form class="pull-right form-inline">
                        <div class="form-group">
                            <select class="form-control" name="category">
                                <option value="0">请选择分类</option>
                                {% for category in categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                {% endfor %}

                            </select>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="s" placeholder="请填写关键词">
                        </div>

                        <div class="form-group">
                            <button type="button" class="btn btn-primary" id="search-btn">查询</button>
                        </div>
                    </form>
                    <div class="toolbar-btn-action">
                        <a class="btn btn-primary m-r-5" href="{% url 'cms:posts_add' %}"><i
                                class="mdi mdi-plus"></i> 新增</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-condensed table-hover">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>标题</th>
                                <th>描述</th>
                                <th>作者</th>
                                <th>分类</th>
                                <th>推荐</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="posts-tbody">

                            </tbody>
                        </table>
                    </div>
                    <ul class="pagination" id="page-box">

                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}